<template>
	<view class="page" v-if="!loadding">
		<!-- <view class="head">
			<image src="../../../static/jiaotou1.png" @click="gotoPage('/pages/user/index/index')"></image>
			<text>邀请好友</text>
		</view> -->
		<view class="person-msg">
			<view class="person-head">
				<image :src="userinfo.avatarUrl" v-if="userinfo.avatarUrl != '' "></image>
				<image src="../../../static/dafaulthead2.png" v-else></image>
			</view>
			<text class="person-name">{{userinfo.nickName}}</text>
		</view>
		<view class="qrcode">
			<text></text> 
			<image :src="qrcode_url" mode="widthFix"></image>
			<view class="btns-wrap">
				<!-- #ifdef MP || APP-PLUS -->

				<!-- #endif  -->
				<!-- #ifdef H5 -->
				<!-- <view class="f34 tc ww100" type="default">长按保存图片</view> -->
				<!-- #endif -->
			</view>
		</view>
		<text class="scan-text">让好友扫一扫上面的二维码，邀请他加入</text>
		<view class="btn-box">
			<!-- <button class="save" @click="savePosterImg">保存图片</button> -->
			<button class="share" @click="fromshare">分享我的二维码</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadding:true,
				qrcode_url: '',
				userinfo: {
					avatarUrl: '',
					nickName: '',
				},
			}
		},
		mounted() {
			/*获取数据*/
			this.getData();
			this.getDateinfo();
		},
		methods: {
			/*获取头像和昵称*/
			getDateinfo() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self._get('user.index/setting', {}, function(res) {
					self.userinfo = res.data.userInfo;
					uni.hideLoading();
				});
			},
			/*获取数据*/
			getData() {
				let self = this;
				uni.showLoading({
					title: '加载中',
				});
				let source = self.getPlatform();
				self._get('plus.agent.qrcode/mpQrcode', {
					source: source
				}, function(data) {
					
					self.qrcode_url = data.data.qrcode;
					//console.log(self.qrcode_url)
					self.loadding=false
					uni.hideLoading();
				});
			},

			/*保存图片*/
			savePosterImg() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				// 下载海报图片
				uni.downloadFile({
					url: self.qrcode_url,
					success(res) {
						uni.hideLoading();
						// 图片保存到本地
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success(data) {
								uni.showToast({
									title: '保存成功',
									icon: 'success',
									duration: 2000
								});
								// 关闭商品海报
								self.isCreatedImg = false;
							},
							fail(err) {
								console.log(err.errMsg);
								if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
									uni.showToast({
										title: '请允许访问相册后重试',
										icon: 'none',
										duration: 1000
									});
									setTimeout(() => {
										uni.openSetting();
									}, 1000);
								}
							},
							complete(res) {
								console.log('complete');
							}
						});
					}
				});
			},
			async fromshare(e) {
				let urls = {};
				urls.type = 'image',
					urls.pictures = [],
					urls.extra = {
						scene: "WXSceneSession"
					}
				let [, imgPath] = await uni.downloadFile({
					url: this.qrcode_url
				})
				urls.pictures.push(imgPath.tempFilePath)
				plus.share.sendWithSystem(urls, function() {
					console.log('分享成功');
				}, function(e) {
					console.log('分享失败：' + JSON.stringify(e));
				})
			}
		}
	}
</script>

<style lang="scss">
	.page {
		width: 100%;
		height: 100%;
		text-align: center;
	}

	.qrcode {}

	.head {
		height: 100rpx;
		width: 100%;
		background-color: #FFFFFF;
		position: fixed;
		top: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		font-size: 36rpx;
		box-shadow: 0 0 10rpx 10rpx #f4f4f4;
	}

	.head image {
		width: 60rpx;
		height: 60rpx;
		display: block;
		margin-right: 250rpx;
	}

	.person-msg {
		width: 60%;
		margin: 120rpx auto 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.person-head {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.person-head image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		display: block;
		margin-right: 40rpx;
	}

	.person-name {
		margin-left: 20rpx;
		font-size: 28rpx;
		font-weight: 900;
	}

	.qrcode image {
		width: 60%;
		margin: 0 auto -60rpx;
	}

	.btns-wrap {
		// position: fixed;
		height: 88rpx;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		z-index: 10;
		width: 80%;
		margin-left: 10%;
	}

	// .btns-wrap {
	// 	width: 60%;
	// 	height: 90rpx;
	// 	line-height: 90rpx;
	// 	border-radius: 0;
	// 	background-color: #007AFF;
	// 	border: 1px solid $dominant-color;
	// }
	.btn-box {
		width: 96%;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		margin-top: 70rpx;
	}

	.share,
	.save {
		width: 60%;
		height: 90rpx;
		line-height: 90rpx;
		margin: 0 auto;
		background-color: #5864FD;
		color: #FFFFFF;
	}
</style>
